<html>
	<head>
		<title>OPD CASES</title>
		<link rel = "stylesheet" href = "style.css">
		<script src = "jquery-1.11.0.js"></script>
		<script src = "gen.js"></script>

		<center>

		<script>
		var globID;
		var delID;

			function syncAjax(x){
				var obj = $.ajax({url:x,async:false});
				return $.parseJSON(obj.responseText);
			}

			function insert_opd_case(obj, opd_case_id){
				cancel();
				
				var r = get_opd_case(opd_case_id);

				if(r.result == 0){
					document.getElementByID("divStatus").innerHTML = r.message;
					return;
				}
				//Storing the data from "r" into the form created
				
				$("#opd_case_name").prop("value", r.opd_cases.opd_case_name);
				
				$("#opd_case_category").prop("value", r.opd_cases.opd_case_category);

				//Store the mouse coordinates where clicked
				var y = event.clientY;
				var x = event.clientX/1.5;

				//Utilize above variables with x,y coordinates to place the form
				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);

				$("#divEdit").fadeIn(500);
				var x = "opd_case_action.php?cmd=4&opd_case_id="+globID;
				globID = opd_case_id;
				
			}

			function get_opd_case(opd_case_id){
				globID = opd_case_id;
				var x = "opd_case_action.php?cmd=1&opd_case_id="+globID;
				return syncAjax(x);
			}

			function confirm_delete(opd_case_id){
				cancel();
				var y = event.clientY;
				var x = event.clientX/1.2;

				//Utilize above variables with x,y coordinates to place the form
				$("#divDelete").css("top",y);
				$("#divDelete").css("left",x);
				$("#divDelete").fadeIn(500);
				delID = opd_case_id;
			}

			function del(){
				var opd_case_id = delID;
				var x = "opd_case_action.php?cmd=3&opd_case_id="+opd_case_id;

				cancel();
				window.location.reload(true);

				var r = syncAjax(x);
			}
			function newRecord(){
				cancel();

				//Store the mouse coordinates where clicked
				var y = event.clientY+40;
				var x = event.clientX-170;

				//Utilize above variables with x,y coordinates to place the form
				$("#divNew").css("top",y);
				$("#divNew").css("left",x);

				$("#divNew").fadeIn(500);
			}

			function newRecSave(){
				var opcn = document.getElementById("new_opd_case_name").value;
				var opcc = document.getElementById("new_opd_case_category").value;

                 
				var x = "opd_case_action.php?cmd=4&opcn="+opcn+"&opcc="+opcc;
				cancel();
				window.location.replace("opd_case_list.php");
				
				var r = syncAjax(x);
			}

			function save(){
				var opid = globID;
				var opcn = document.getElementById("opd_case_name").value;
				var opcc = document.getElementById("opd_case_category").value;
				

				var x = "opd_case_action.php?cmd=2&opid="+opid+"&opcn="+opcn+"&opcc="+opcc;
				cancel();

				window.location.replace("opd_case_list.php");
				
				var r = syncAjax(x);	
			}

			function cancel(){
				$("#divEdit").fadeOut(1000);
				$("#divDelete").fadeOut(1000);
				
			}

		</script>
</head>
<body>
	<table bgcolor = "#f0f0f0">
		<tr>
			<td colspan = "3" id = "pageheader">
				Health Information System
			</td>
		</tr>

		<tr>
			<td id = "mainnav">
				<div class="menuitem">Location</div>
				<div class="menuitem">OPD Cases</div>
				<div class="menuitem">Health Promotion</div>
				<div class="menuitem">Nutrition</div>
				<div class="menuitem">Child Welfare</div>
				<div class="menuitem">Family Planning</div>
				<div class="menuitem">Logout</div>
			</td>

			<td id = "content">
				<div id = "divPageMenu">
				<a href = 'opd_record_list.php'>
					<span class = "topmenuitem">OPD Records</span></a>
					<span class = "topmenuitem active">OPD Cases</span>
					<a href = 'community_member_list.php'>
					<span class = "topmenuitem">Community Members</span></a>
					<a href = 'birth_index.php'>
					<span class = "topmenuitem">Birth Records</span></a>
				</div>

				<div id = "divStatus" class = "status">
					Status Info
				</div>

				<div id = "divContent">
					<center>OPD CASES</center>
					<table class = "reportTable" width = "100%">
						<tr class = "header">
							<td>OPD ID</td>
							<td>OPD Case</td>
							<td>OPD Category</td>
							<td></td>
							<td></td>
							<td></td>
						</tr>

	<?php
		include("opdClass.php");

		$obj = new opdClass();

		if(!$obj->get_opd_cases()){
			echo "Error";
			exit();
		}

		$row=$obj->fetch();
		$row_counter=0;

		while($row){
			if($row_counter%2 == 0)
				$style = "class = 'row1'";
			else
				$style = "class = 'row2'";

			$opd_case_id = $row["opd_case_id"];

			echo "<tr $style>";
				echo("<td>". $row["opd_case_id"] . "</td>");
				echo("<td>". $row["opd_case_name"] . "</td>");
				echo("<td>". $row["opd_case_category"] . "</td>");
				echo("<td><span class = 'hotspot' onclick = 'insert_opd_case($opd_case_id)'>Edit</span></td>");
				echo("<td><span class = 'hotspot' onclick = 'confirm_delete($opd_case_id)'>Delete</span></td>");
			echo "</tr>";

			$row = $obj->fetch();
			$row_counter++;	
		}
		echo("</table></div></td></tr>");
	?>

	<tr><td colspan = "3" align = "center">
		</br></br>
		<div id = "newRecord" onclick="newRecord( )" class = "button">
			New OPD Case
		</div>
	</td></tr>

	<tr><td colspan = "3">
		</br></br>
		<div id = "pagefooter">
			Created by: Nii Apa Abbey | Phyllis Treve | Alfred Gaglo | Chris Ampadu | Worlanyo Adrah
		</div>
	</td></tr>

</table>

	<!--Edit OPD Record PopUp-->
	<div id = "divEdit" class = "popupForm">
		<table class = "tableForm">

			<tr>
				<td class = "label">OPD Case Name: </td>
				<td class = "field"><input type = "text" value = "" id = "opd_case_name"></td>
			</tr>
			
			<tr>
				<td class = "label">OPD Case Category: </td>
				<td class= "field"><input type = "number" value = "" id = "opd_case_category">
				</td>
			</tr>

			<tr class="field">
				<td align = "right"><input type = "button" value = "Save" onclick = "save()"></td>
				<td><input type = "button" value = "Cancel" onclick = "cancel()">
				</td>
			</tr>
		</table>
	</div>


	<!--Delete PopUp-->
	<div id = "divDelete" class = "popupForm">
		<table class = "tableForm">
			<tr class = "label"><td> Confirm Delete </td></tr>
		</table>
		<table class = "tableForm">
			<tr>
				<td><input type = "button" value = "Yes" onclick = "del()"></td>
				<td><input type = "button" value = "No" onclick = "cancel()"></td>
			</tr>
		</table>
	</div>
						
		</table>
		
	</div>

						

	<!--New OPD Case PopUp-->
	<div id = "divNew" class = "popupForm">
		<table class = "tableForm">
			<tr>
				<td class = "label">OPD Case Name: </td>
				<td class = "field"><input type = "text" value = "" id = "new_opd_case_name"></td>
			</tr>
			<tr>
				<td class = "label">OPD Case Category: </td>
				<td class = "field"><input type = "number" value = "" id = "new_opd_case_category"></td>
			</tr>
			<tr>
				<td align = "right"><input type = "button" value = "Save" onclick = "newRecSave()"></td>
				<td><input type = "button" value = "Cancel" onclick = "cancel()"></td>
			</tr>
		</table>
	</div>


</center>
</body>
</html>